<template>
    <div id="echartSeptum1" ref="chartDom" style="width: 100%;height: 26px;"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    annularData: {
      type: Array,
      default: [],
    },
    total: {
      type: Number,
    },
    quantity: {
      type: Number,
    },
  })
  watch(() => props.quantity, (value) => {
    initChart();
  }, { deep: true });
  watch(() => props.total, (value) => {
    initChart();
  }, { deep: true });
  let myChart = null;
  const yData = [props.quantity]
    const Option = computed(() => {
      return {
        grid: {
        top: '15%',
        bottom: '15%',
        right: '0%',
        left:'0%'
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(52,78,130,0.2)',
                    width: 1,
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(52,78,130,0.2)'
                }
            },
            axisLabel: {
                show: false,
            },
            max: props.quantity
        },
        yAxis: {
        data: ['02月'],
        axisLine: {
            show: false // 隐藏X轴轴线
        },
        axisTick: {
            show: false // 隐藏X轴轴线
        },
        axisLabel: {
            show: false,
        }
        },
        series: [
        {
            type: 'bar',
            barWidth: 14,
            label: {
                normal: {
                show: true,
                color: '#fff',
                position: 'right',
                fontSize: 12,
                formatter: function (data) {
                    return data.value;
                }
                }
            },
            itemStyle: {
                normal: {
                color: function(p){
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                        offset: 1,
                        color: '#011853'
                        },
                        {
                        offset: 0,
                        color: '#00ffff'
                        }
                        ])
                }
                }
            },
            data:  [props.total],
        },
        {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#000'
                }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 16,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [3, 20],
            symbolPosition: 'start',
            symbolOffset: [0.2, 0],
            data: [props.total],
            width: 2,
            z: 0,
            zlevel: 1
        },
        ]
    }
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  <style>
    #echartSeptum1{
        width:100%;
        height:26px;
        border:1px solid #91a9ff;
        margin:8px 0;
    }
  </style>